<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="author" content="wangbo">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./normalize.css">
  <style>
    body {background: #fbc73b;      }
    .wrapper {      margin: 100px 200px;     }
    .scene {
      width: 260px;
      height: 400px;
      perspective: 1000px;
    }
    .movie {      
      position: relative;      
      transform-style: preserve-3d;      
      transition: all 2s;    }
    .movie .poster,
    .movie .info {
      position: absolute;
      width: 260px;
      height: 400px;
      background-color: #fff;
      color: #333;
    }
    .movie .poster {      /*  因为宽是260px */
      transform: translateZ(130px);
      background-image: url("./img/poster01.jpg");
    }
    .movie .info {      transform: translateX(130px) rotateY(90deg);    }
    .movie:hover {      transform: rotateY(-80deg);    }
  </style>
</head>

<body>
  <header>
    <h1>3D Shading with Box-Shadows <span>A shading effect for 3D transformed elements</span></h1>  
  </header>
  <ul class="wrapper">
    <li class="scene">
      <div class="movie">
        <div class="poster"></div>
        <div class="info">
          <header>
            <h1>It's a Wonderful Life</h1>
            <span class="year">1946</span>
            <span class="rating">PG</span>
            <span class="duration">130 minutes</span>
          </header>
          <p>
            In Bedford Falls, New York on Christmas Eve, George Bailey is deeply troubled. Prayers for his well-being
            from friends and family reach Heaven. Clarence Odbody, Angel Second Class, is assigned to visit Earth to
            save George, thereby earning his wings. Franklin and Joseph, the head angels, review George's life with
            Clarence.
          </p>
        </div>
      </div>
    </li>
  </ul>
</body>

</html>